<!-- 左侧列表式模板 -->
<template>
  <div class="template-body">
    <section class="content-box">
      <section class="aside">
        <leftAsideList
          :propsData="propsData"
          @leftNavChange="leftNavChange"
          :dataList="catList"
          ref="nav"
        ></leftAsideList>
      </section>
      <scroll-view
        scroll-y
        class="content"
        id="content"
        @scrolltolower="scrollBottom"
        show-scrollbar="false"
        :scroll-top="scrollTop"
        @scroll="scroll"
        :style="{
          borderRadius:
            currentCat.id == catList[0].id ? '0 0 0 0' : '20rpx 0 0 0',
        }"
        refresher-enabled
        :refresher-triggered="freshing"
        refresher-default-style="none"
        @refresherpulling="refresherpulling"
        @refresherrefresh="refresherrefresh"
        @refresherrestore="showRefresh = false"
      >
        <view class="refresh-box" v-if="showRefresh">
          <i class="iconfont icon-leftbutton-copy"></i>
          <text>向下继续{{ beforeText }}</text>
        </view>
        <view class="scrollBox" id="list">
          <section class="ad">
            <classifyAd :propsData="propsData"></classifyAd>
          </section>
          <view class="nav-pic-list" v-if="propsData.params.styleType == 5">
            <div
              class="navPicItem"
              v-for="item in currentCat.list"
              :key="item.id"
              @click.stop="toGoods(item.id)"
            >
              <image mode="aspectFill" :src="item.pic_url"  />
            </div>
          </view>
          <view class="nav-pic-list1" v-if="propsData.params.styleType == 4">
            <div
              class="navPicItem"
              v-for="item in currentCat.list"
              :key="item.id"
              @click.stop="toGoods(item.id)"
            >
              <image mode="aspectFill" :src="item.pic_url"  />
              <view class="name">{{ item.name }}</view>
            </div>
          </view>
          <!-- <nextCat
            :show="true"
            v-if="currentCat.id != catList[catList.length - 1].id"
            @nextCat="scrollChangeNav"
          ></nextCat> -->
        </view>
      </scroll-view>
      <bottomToNext
        v-if="showBottomNext && scrollEnd"
        :nextText="nextText"
        @changeNext="scrollChangeNav"
      ></bottomToNext>
    </section>
  </div>
</template>

<script>
import leftAsideList from "../components/leftAsideList/index.vue";
import classifyAd from "../components/classifyAd/index.vue";
import goodsList from "../components/goodsList/index.vue";
import bottomToNext from "../components/bottomToNext/index.vue";
import firstNav from "../components/firstNav/index.vue";
import nextCat from "../components/nextCat/index.vue";
export default {
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    catList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mixins: [],
  components: {
    leftAsideList,
    classifyAd,
    goodsList,
    firstNav,
    nextCat,
    bottomToNext,
  },
  data() {
    return {
      // 当前选中一级导航
      currentCat: {},
      // 滚动条滚动位置
      scrollTop: 0,
      // 滚动位置
      top: 0,
      // 滚动区域的盒子高度
      boxHeight: 0,
      // 手势起始位置
      goodStart: 0,
      // 手势结束位置
      goodEnd: 0,
      // 滑动盒子高度
      scrollHeight: 0,
      // 是否滑动到底部
      scrollEnd: false,
      // 是否显示切换下一分类的按钮
      showBottomNext: false,
      // 下一分类名
      nextText: "",
      // 是否在下拉刷新
      freshing: false,
      showRefresh: false,
      beforeText:'',
    };
  },
  mounted() {
    // if (this.catList.length) {
    //   this.$refs.nav.handleTabItem(this.catList[0], 0);
    // }
  },
  watch: {
    catList: {
      handler() {
        this.$refs.nav.init();
      },
      deep: true,
    },
  },
  computed: {},
  methods: {
    leftNavChange(e) {
      this.boxHeight = 0;
      this.currentCat = e;
      this.scrollTop = this.top;
      this.$nextTick(() => {
        this.scrollTop = 0;
        this.scrollEnd = false;
        this.getCurrentBoxHeight();
      });
    },
    // 触底
    scrollBottom() {
      // let id = this.currentCat.id;
      // let index = this.catList.findIndex((item) => {
      //   return id == item.id;
      // });
      // if (index < this.catList.length - 1) {
      //   let item = this.catList[index + 1];
      //   this.$refs.nav.handleTabItem(item, index + 1);
      // }
      this.scrollEnd = true;
      if (this.currentCat.id == this.catList[this.catList.length - 1].id) {
        return this.showBottomNext = false;
      }
      let index = this.catList.findIndex((item) => {
        return item.id == this.currentCat.id;
      });
      this.nextText = this.catList[index + 1].name;
      this.showBottomNext = true;
    },
    scroll(e) {
      this.top = e.detail.scrollTop;
    },
    getCurrentBoxHeight() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#list")
        .boundingClientRect((data) => {
          this.boxHeight = data.height;
        })
        .exec();
      query
        .select("#content")
        .boundingClientRect((data) => {
          this.scrollHeight = data.height;
        })
        .exec();
    },
    // 点击分类跳转
    toGoods(id) {
      uni.navigateTo({
        url: "/other/list/list?cat_id=" + id,
      });
    },
    goodTouchstart(e) {
      let start = e.changedTouches[0].pageY;
      this.goodStart = start;
    },
    goodTouchend(e) {
      let end = e.changedTouches[0].pageY;
      this.goodEnd = end;
      if (this.goodStart - this.goodEnd >= 35) {
        if (this.boxHeight <= this.scrollHeight) {
          this.scrollChangeNav();
        } else {
          if (this.scrollEnd) {
            this.scrollChangeNav();
          }
        }
      }
      if (this.goodEnd - this.goodStart >= 35) {
        if (this.boxHeight <= this.scrollHeight) {
          this.scrollLastNav();
        } else {
          if (this.top <= 20) {
            this.scrollLastNav();
          }
        }
      }
    },
    // 切换下一二级分类
    scrollChangeNav() {
      let id = this.currentCat.id;
      if (id == this.catList[this.catList.length - 1].id) {
        return;
      } else {
        let index = this.catList.findIndex((item) => {
          return item.id == id;
        });
        this.$refs.nav.handleTabItem(this.catList[index + 1], index + 1);
        this.showBottomNext = false;
      }
    },
    // 切换上一二级分类
    scrollLastNav() {
      let id = this.currentCat.id;
      if (id == this.catList[0].id) {
        return;
      } else {
        let index = this.catList.findIndex((item) => {
          return item.id == id;
        });
        this.$refs.nav.handleTabItem(this.catList[index - 1], index - 1);
        this.showBottomNext = false;
        setTimeout(() => {
          this.freshing = false;
        }, 200);
      }
    },
    refresherrefresh() {
      this.freshing = true;
      if (this.currentCat.id == this.catList[0].id) {
        setTimeout(() => {
          this.freshing = false;
        }, 200);
        return;
      }
      this.scrollLastNav();
    },
    refresherpulling() {
      if (this.currentCat.id != this.catList[0].id) {
        let index = this.catList.findIndex((item) => {
          return item.id == this.currentCat.id;
        });
        this.beforeText = this.catList[index - 1].name;
        this.showRefresh = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-body {
  width: 100%;
  height: 100%;
  padding-top: 12rpx;
  .content-box {
    height: 100%;
    display: flex;
    .aside {
      width: 202rpx;
      min-width: 202rpx;
      height: 100%;
      background-color: #f2f2f2;
    }
    .content {
      flex: auto;
      height: 100%;
      background: #ffffff;
      .nav-pic-list {
        padding: 10rpx 32rpx 0 32rpx;
        .navPicItem {
          width: 100%;
          height: 160rpx;
          background-color: #fff;
          border-radius: 10rpx;
          margin-bottom: 32rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .nav-pic-list1 {
        padding: 10rpx 16rpx;
        display: flex;
        flex-wrap: wrap;
        .navPicItem {
          width: 33.33%;
          padding:0 16rpx ;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 30rpx;
          color: #808080;
          font-size: 24rpx;
          font-family: PingFang SC;
          image {
            background-color: #fff;
            width: 140rpx;
            height: 140rpx;
            border-radius: 10rpx;
            margin-bottom: 14rpx;
          }

          .name{
            display: block;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow: hidden;
            flex:1;
            width: 100%;
            text-align: center;
          }
        }
        .navPicItem:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .refresh-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24rpx 0;
    .iconfont {
      color: #f0250e;
      font-size: 38rpx;
    }
    text {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
  }
}
</style>
